<template>
	<view class="contents">
		<view class="head_title">
			优惠劵
		</view>
		<view class="vtabs">
			<van-tabs active="active" @change="onChange" title-inactive-color='#000' title-active-color='#000' color='#289958'>
			  <van-tab title="未使用"></van-tab>
			  <van-tab title="已使用"></van-tab>
			  <van-tab title="已失效"></van-tab>
			</van-tabs>
		</view>
		<view style="height: 170rpx;"></view>
		<view class="oredr_list" v-for="(item,index) in couponList" :key="index">
			<view class="left">
				<view class="title">
					{{item.coupon_title}}
				</view>
				<view class="times">
					{{item.add_time.substring(0,10)}} ~ {{item.end_time.substring(0,10)}}
				</view>
				<view class="shiyong" @click="shiYong(item.id)">
					立即使用
				<!-- </view>已使用<view class="shixiao"> -->
				</view>
			</view>
			<view class="right">
				<view class="tatol" v-if="new Date(item.end_time).getTime() - Date.now() < 24 * 60 * 60 * 1000&&status==0">
					快到期
				</view>
				<view class="tatol" v-if="new Date(item.end_time).getTime() - Date.now() < 0">
					已失效
				</view>
				<view class="price">
					￥{{item.coupon_price}}
				</view>
				<view class="rule">
					满￥{{item.use_min_price}}可用
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<view class="fooder" style="height: 100rpx;" v-if="couponList.length == 0">
			<view class="without">
				<image src="../../static/coupon.png" mode=""></image>
				暂无优惠券
			</view>
		</view>
		<view class="bottom" style="height: 100rpx;" v-if="ishaveleft">
			<view class="">没有更多了哦</view>
		</view>
		
	</view>
</template>

<script>
	import {
		myCoupons
	} from '@/api/api.js'
	export default {
		data() {
			return {
				active:0,
				couponList: [],//优惠券列表
				page: 1,
				status: 0, //优惠券状态
				count:0,  //优惠券总数
				ishaveleft:false
			}
		},
		onLoad() {
			if(!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url:'/page_login/index/index'
				})
			}
			this.init(this.page,this.status)
		},
		onReachBottom() {
			console.log(this.couponList.length)
			if(this.count == this.couponList.length ){
				this.ishaveleft = true
				return
			}
			this.page = this.page + 1
			uni.showLoading({
				title: '加载中'
			});
			let time = setTimeout(() => {
				let data = `first=${this.page}&limit=${10}&status=${this.status}`
				myCoupons(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading()
						this.couponList.push(...res.data.data)
						this.count = res.data.count
					} else {}
				})
				clearTimeout(time)
			}, 1500)
		},
		
		methods: {
			// 请求优惠券信息
			init(page, status) {
				if (page == undefined) {
					page = 1
				}
				if (status == undefined) {
					status = 0
				}
				let data = `first=${page}&limit=${10}&status=${status}`
				myCoupons(data).then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.couponList = res.data.data
						// this.count = res.data.count
						// console.log('切换',this.count)
					} else {}
					console.log(this.couponList)
				})
			},
			// 切换标签
			onChange(e){
				this.page = 1;
				// console.log(e)
				this.active = e.detail.index
				// console.log(e.detail.index)
				if (this.active == 0) {
					this.status = 0
				} else if (this.active == 1) {
					this.status  = 1
				}  else {
					this.status = 2
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				this.count = 0
				this.init(1, this.status)
				
			},
			// 使用优惠券
			shiYong(id) {
				console.log(id)
				uni.switchTab({
					url:'/pages/classify/index/index'
				})
				// uni.showModal({
				// 	title: '[体验券]徐香猕猴桃',
				// 	content: '优惠券可用时间为2022-09-27至2022年2022-10-27 本优惠券限会员店内指定商品合计金额，不含运费达到满额可用，单笔订单可使用一张，特价虚拟商品等不可用，每张券仅限被使用一次，超出有效期的券将失效',
				// 	showCancel:false,
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			// console.log('用户点击确定');
				// 			uni.switchTab({
				// 				url:'/pages/classify/index/index'
				// 			})
				// 		} else  {}
				// 	}
				// });
			},
			
		}
	}
</script>

<style lang="scss">
.contents{
	width: 100%;
	min-height: 100vh;
	background-color: rgb(247, 249, 252);
	.head_title{
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 46rpx;
		font-weight: bold;
		background-color: #fff;
		box-sizing: border-box;
		padding-left: 50rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}
	.vtabs{
		width: 100%;
		height: auto;
		position: fixed;
		top: 85rpx;
		left: 0;
		z-index: 99999;
	}
	.oredr_list{
		width: 650rpx;
		height: 250rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 35rpx auto 0;
		display: flex;
		.left{
			width: 460rpx;
			height: 100%;
			.title{
				width: 100%;
				height: 38rpx;
				line-height: 38rpx;
				font-weight: bold;
				font-size: 28rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding-left: 25rpx;
			}
			.times{
				width: 100%;
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				color: rgb(147, 147, 147);
				margin-top: 20rpx;
				box-sizing: border-box;
				padding-left: 25rpx;
			}
			.shiyong{
				width: 145rpx;
				height: 45rpx;
				background-color: rgb(40, 153, 88);
				border-radius: 50rpx;
				text-align: center;
				line-height: 45rpx;
				color: #fff;
				font-size: 24rpx;
				margin-top: 70rpx;
				margin-left: 25rpx;
			}
			.shixiao{
				width: 145rpx;
				height: 45rpx;
				background-color: rgb(204, 204, 204);
				border-radius: 50rpx;
				text-align: center;
				line-height: 45rpx;
				color: #fff;
				font-size: 24rpx;
				margin-top: 70rpx;
				margin-left: 25rpx;
			}
		}
		.right{
			width: 190rpx;
			height: 100%;
			position: relative;
			.tatol{
				position: absolute;
				top: 0;
				right: 0;
				width: 100rpx;
				height: 40rpx;
				background-color: rgb(225, 97, 88);
				border-radius: 0 20rpx 0 20rpx;
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
			}
			.price{
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: rgb(55, 123, 95);
				text-align: center;
				margin-top: 95rpx;
			}
			.rule{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				color: rgb(142, 142, 142);
				text-align: center;
				margin-top: 10rpx;
			}
		}
		.fengexian{
			width: 640rpx;
			border: 1rpx solid #EEEEEE;
			margin: 30rpx auto 0;
		}
		.order_time{
			box-sizing: border-box;
			padding: 0 28rpx;
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			margin-top: 20rpx;
			color: #999999;
			font-size: 26rpx;
			span{
				color: #3DB963;
			}
		}
		.order_bottom{
			width: 100%;
			display: flex;
			margin-top: 25rpx;
			.cancel{
				width: 162rpx;
				height: 52rpx;
				border: 2rpx solid #3DB963;
				border-radius: 34rpx;
				color: #3DB963;
				font-size: 24rpx;
				text-align: center;
				line-height: 52rpx;
				margin-left: 300rpx;
			}
			.payment{
				width: 162rpx;
				height: 52rpx;
				border-radius: 34rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 52rpx;
				background-color: #1DB475;
				margin-left: 30rpx;
			}
		}
	
	}
	.fooder {
		.without {
			width: 500rpx;
			height: 500rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			text-align: center;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

</style>
